<template>
  <div>
    <div class="navbar">
      <van-nav-bar
        title="账号中心"
        @click-left="$router.push('/mine')"
        :border="false"
      >
        <template #left>
          <van-icon name="arrow-left" color="black" size="18px" />
        </template>
      </van-nav-bar>
    </div>
    <div class="banner">
      <!-- 输入任意文本 -->
      <van-field
        v-model="uname"
        placeholder="请输入昵称"
        input-align="right"
        center
        :border="false"
        label="用户名"
      >
        <template #label>
          <div class="size"><p>昵称：</p></div>
        </template>
      </van-field>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field
        v-model="phone"
        type="tel"
        placeholder="请输入手机号"
        input-align="right"
        center
        :border="false"
      >
        <template #label>
          <div class="size"><p>手机号：</p></div>
        </template>
      </van-field>
      <!-- 输入密码 -->
      <van-field
        type="password"
        placeholder="请输入密码"
        input-align="right"
        v-model="pwd"
        center
        :border="false"
      >
        <template #label>
          <div class="size">
            <p>密码：</p>
          </div>
        </template>
      </van-field>
      <!-- 确认密码 -->
      <van-field
        v-model="password"
        type="password"
        placeholder="请确认密码"
        input-align="right"
        center
        :border="false"
      >
        <template #label>
          <div class="size"><p>确认密码：</p></div>
        </template>
      </van-field>
    </div>

    <van-button
      type="primary"
      hairline
      round
      color="#FFD030"
      size="small"
      @click="submit"
      ><span>确认修改</span></van-button
    >
  </div>
</template>

<script>
import { user } from "@/api/request";
import { mapState } from "vuex";
export default {
  data() {
    return {
      ff: true,
      use: [],
      uname: "",
      password: "",
      phone: "",
      pwd: "",
      // 用于保存修改成功的状态码
      obc: "",
    };
  },
  methods: {
    //更改成功的弹出框
    pop() {
      if (this.obc == 200) {
        this.$toast({
          message: "修改成功",
          position: "top",
        });
      }
    },
    submit() {
      if (this.pwd !== this.password) {
        return this.$toast({
          message: "密码不一致",
          position: top,
        });
      } else {
        console.log(this.$store.state.user.uid)
        user({
          uname: this.uname,
          password: this.password,
          phone: this.phone,
        }).then((res) => {
          console.log(res);
          console.log(res.data);
          console.log(res.data.status);
          this.obc = res.data.status;
          if (this.obc == 200) {
            this.$toast({
              message: "修改成功",
              position: "top",
            });

            this.$router.push("/");
            // 删除token
            localStorage.removeItem("token");
            // 将用户昵称，手机号，头像为空保存到vuex中
            this.$store.commit("changeName", null);

            this.$store.commit("changePhone", null);
            this.$store.commit("changePic", null);
            //  修改uid为空
            this.$store.commit("changeUid", null);
          } else {
            return this.$toast({
              message: res.data.message,
              position: "top",
            });
          }
        });
      }
    },
  },
  mounted() {
    this.pop();
  },
  computed: {
    //mapState将开放vuex中保存的user对象到当前组件的计算属性中
    //这样，在当前组件内部,就可以直接使用user来访问vuex中的user
    ...mapState(["user", "token"]),
  },
};
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: "黑体";
  }
}

::v-deep .van-field__left-icon {
  color: #ffca0d;
  //   color: #b3b3b3;
}
.ssize {
  color: #ffd030;
  background-color: black;
}

.banner {
  width: 350px;
  margin: 0 auto;
  // display: flex;
  // justify-content: center;
  // flex-direction: column;
  align-items: center;
  .van-field {
    box-sizing: border-box;
    width: 320px;
    height: 45px;
    // background: red;
    padding: 0;
    margin: 0 auto;
    &:nth-child(4) {
      height: 60px;
    }

    &:focus-within {
      border-bottom: 1px #fdd245 solid;
    }

    // input {
    //   width: 300px;
    // }
    .size {
      p {
        font-size: 16px;
        font-weight: normal;
        color: #333;
      }
    }
  }
}
.van-button {
  width: 340px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  span {
    font-size: 18px;
    text-align: center;
  }
}
</style>